<template>
  <div
    class="tag"
    :class="{'firstTag': itemIndex === 0, 'secondTag': itemIndex === 1}"
    @click="handleClickTag(tagItem)"
  >
    <span>{{ tagItem.content }}</span>
    <span class="tag-nums">+{{ tagItem.nums }}</span>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
  props: ["tagItem", "itemIndex", "isClick"],
  methods: {
    handleClickTag(item) {
      // 只会在弹出短评输入框的时候可以点击
      if (this.isClick === "true") {
        this.$emit('updateTags', item.content)
      }
    }
  }
};
</script>

<style scoped>
.tag {
  border-radius: 20px;
  padding: 5rpx 10rpx;
  background-color: #eee;
  font-size: 20rpx;
  margin: 10rpx;
  padding: 10rpx;
}
.tag-nums {
  color: #bbb;
  margin-left: 10rpx;
}
.firstTag {
  background-color: rgb(250, 250, 210);
}
.secondTag {
  background-color: rgb(94, 132, 156);
}
</style>